<template>
  <div class="runningbar" ref="container"></div>
</template>

<script>
import echarts from "echarts";
import dayjs from "dayjs";

export default {
  data() {
    let data = [
      ["09:01", "09:02", "09:03", "09:04", "09:05", "09:06", "09:07"],
      [120, 200, 150, 80, 70, 110, 130],
      [900, 700, 400, 200, 140, 700, 50],
    ];
    return {
      data: data,
      chart: null,
      conf: {
        grid: {
          top: 75,
          bottom: 110,
        },
        legend: {
          top: 30,
          right: "10%",
          show: true,

          textStyle: {
            fontFamily: "Arial",
            fontSize: 22,
            color: "#3b95d2",
          },
        },
        xAxis: {
          type: "category",
          axisLine: {
            lineStyle: {
              color: "#3b95d2",
              width: 1,
            },
          },
          axisLabel: {
            color: "#3b95d2",
            fontSize: 26,
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              width: 1,
              color: "#3b95d2",
            },
          },
          axisLabel: {
            color: "#3b95d2",
            fontSize: 20,
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: "#3b95d2",
              width: 1,
            },
          },
        },
        series: [
          {
            type: "line",
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "rgba(0,103,149, 1)" },
                { offset: 1, color: "rgba(0,103,149,0)" },
              ]),
            },
            lineStyle: {
              color: "#2DBBFA",
              width: 2,
            },
            itemStyle: {
              color: "#2DBBFA",
              borderColor: "#2DBBFA",
            },
            symbolSize: 10,
            symbol: "circle",
            data: [],
            name: "清算",
          },
          {
            type: "line",
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "rgba(23,150,0, 1)" },
                { offset: 1, color: "rgba(23,150,0, 0)" },
              ]),
            },
            lineStyle: {
              color: "#69FF4E",
              width: 2,
            },
            itemStyle: {
              color: "#69FF4E",
              borderColor: "rgba(23,150,0, 1)",
            },
            symbolSize: 10,
            symbol: "circle",
            data: [],
            name: "结算",
          },
          {
            type: "bar",
            showBackground: true,
            barWidth: 50,
            backgroundStyle: {
              color: "#2dbbfa",
              opacity: 0.1,
            },
            itemStyle: {
              color: "rgba(0,0,0,0)",
            },
            data: [],
          },
        ],
      },
    };
  },
  mounted() {
    let chart = echarts.init(this.$refs.container);
    let conf = this.conf;
    chart.setOption(conf);
    this.chart = chart;
    this.init();
  },
  watch: {
    data(newVal) {
      this.updateData(newVal);
    },
  },
  destroyed() {
    clearInterval(this.timer);
    this.chart.dispose();
  },
  methods: {
    init() {
      this.timer = setInterval(() => {
        let data = this.data;
        let now = dayjs().format("mm:ss");
        data[0].splice(0, 1);
        data[0].push(now);
        data[1].splice(0, 1);
        data[1].push(Math.round(1 + Math.random() * 200));
        data[2].splice(0, 1);
        data[2].push(Math.round(1 + Math.random() * 200));
      }, 1000);
    },

    updateData(data) {
      this.chart.setOption({
        xAxis: {
          data: data[0],
        },
        series: [
          {
            name: "清算",
            data: data[1],
          },
          {
            name: "结算",
            data: data[2],
          },
          {
            data: data[2],
          },
        ],
      });
    },
  },
};
</script>

<style lang="less" scoped>
.runningbar {
  width: 100%;
  height: 100%;
}
</style>
